<template>
    <div class="page-wrap">
        <div class="page__header">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="Approved by">
                    <el-input v-model="formInline.user" placeholder="Approved by" clearable />
                </el-form-item>
                <el-form-item label="Activity zone">
                    <el-select v-model="formInline.region" placeholder="Activity zone" clearable>
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                    </el-select>
                </el-form-item>
                <el-form-item label="Activity time">
                    <el-date-picker v-model="formInline.date" type="date" placeholder="Pick a date" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
            <div class="page__header-btns">
                <el-button type="primary" @click="handleAdd">新增</el-button>
                <el-button type="danger" @click="handleBatchRemove">批量删除</el-button>
            </div>
        </div>
        <div class="page__content">
            <myTable :data="tableData" :page="{ index: 1, size: 20, total: 4 }" :showSelection="true" @selection-change="handleSelectionChange">
                <el-table-column fixed prop="date" label="Date" width="150" />
                <el-table-column prop="name" label="Name" width="120" />
                <el-table-column prop="state" label="State" width="120" />
                <el-table-column prop="city" label="City" width="120" />
                <el-table-column prop="address" label="Address" />
                <el-table-column prop="zip" label="Zip" width="120" />
                <el-table-column fixed="right" label="Operations" width="120">
                    <template #default>
                        <el-button link type="primary" size="small" @click="handleClick">Detail</el-button>
                        <el-button link type="primary" size="small">Edit</el-button>
                    </template>
                </el-table-column>
            </myTable>
        </div>
        <!-- <div class="page__footer">我是底部区域</div> -->
        <addOrEdit :layer="layer" @getTableData="getTableData" v-if="layer.show" />
    </div>
</template>
<script setup name="secretCustomer">
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import myTable from '@/components/table/index.vue'
import addOrEdit from './child/addOrEdit.vue'
import { del } from '@/api/customer'
// 弹窗控制器
const layer = reactive({
    show: false,
    title: '新增',
    showButton: true
})
const chooseData = ref([])
// 新增弹窗功能
const handleAdd = () => {
    layer.title = '新增数据'
    layer.show = true
    delete layer.row
}
// 编辑弹窗功能
const handleEdit = (row) => {
    layer.title = '编辑数据'
    layer.row = row
    layer.show = true
}

const handleBatchRemove = () => {
    if (chooseData.value.length === 0) {
        ElMessage.error('请选择要删除的数据')
        return
    }
    ElMessageBox.confirm('您确认要删除选择的数据吗？', '请确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(() => {
            handleDel(chooseData.value.map((item) => item.id))
        })
        .catch(() => {})
}
const handleDel = async (ids) => {
    const res = await del({ ids })
    console.log('删除返回的数据', res)
    if (res.code === 200) {
        ElMessage.success('删除成功')
        // getTableData()
    }
}

const getTableData = async () => {
    const res = await getList()
    if (res.code === 200) {
        tableData.value = res.data
    }
}

const handleSelectionChange = (val) => {
    chooseData.value = val
}

const handleClick = () => {
    console.log('click')
}

const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
        tag: 'Home'
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
        tag: 'Office'
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
        tag: 'Home'
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
        tag: 'Office'
    }
]

console.log('刷新页面了吗？')
const formInline = reactive({
    user: '',
    region: '',
    date: ''
})

const onSubmit = () => {
    console.log('submit!')
}
</script>

<style lang="scss" scoped>
.page-wrap {
    width: 100%;
    height: 100%;
    background: var(--white-color);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    padding: 10px 16px;

    .page__header-btns {
        padding-bottom: 10px;
    }

    .page__content {
        flex: 1;
        height: 0;
        overflow: auto;
    }
}

.demo-form-inline .el-input {
    --el-input-width: 220px;
}
</style>
